<div id="mainContent" class="omega grid_13">
    <?php
    isset($hir_data) ? $form_title = 'Hír szerkesztése' : $form_title = 'Hír felvétele';
    ?>

    <h1><?php echo $form_title ?></h1>

    <?php
    // ha nincs beolvasva adatbázisból, vagy már szerkesztettük
    if (!isset($hir_data->hir_tipus) || $hir_data->hir_tipus != set_value('hir_tipus') && set_value('hir_tipus') != '') {
        $hir_data->hir_tipus = set_value('hir_tipus');
    }
    if (!isset($hir_data->hir_szin) || $hir_data->hir_szin != set_value('hir_szin') && set_value('hir_szin') != '') {
        $hir_data->hir_szin = set_value('hir_szin');
    }
    if (!isset($hir_data->hir_cim) || $hir_data->hir_cim != set_value('hir_cim') && set_value('hir_cim') != '') {
        $hir_data->hir_cim = set_value('hir_cim');
    }
    if (!isset($hir_data->hir_cimkek) || $hir_data->hir_cimkek != set_value('hir_cimkek') && set_value('hir_cimkek') != '') {
        $hir_data->hir_cimkek = set_value('hir_cimkek');
    }
    if (!isset($hir_data->hir_szoveg) || $hir_data->hir_szoveg != set_value('hir_szoveg') && set_value('hir_szoveg') != '') {
        $hir_data->hir_szoveg = set_value('hir_szoveg');
    }
    if (!isset($hir_data->hir_kep_url) || $hir_data->hir_kep_url != set_value('hir_kep_url') && set_value('hir_kep_url') != '') {
        $hir_data->hir_kep_url = set_value('hir_kep_url');
    }
    if (!isset($hir_data->hir_youtube_id) || $hir_data->hir_youtube_id != set_value('hir_youtube_id') && set_value('hir_youtube_id') != '') {
        $hir_data->hir_youtube_id = set_value('hir_youtube_id');
    }

    // a két radio buttonnak mindenképpen kell adni értéket, ha nincs neki.
    if ($hir_data->hir_tipus == "") {
        $hir_data->hir_tipus = "s";
    }
    if ($hir_data->hir_szin == "") {
        $hir_data->hir_szin = "a";
    }

    if (!isset($hir_data->hir_id)) {
        echo form_open("admin/hirek/add_hir");
        // ha új hir, nem lesz user_id így csinálunk egyet, mert kell a scripthez
        $hir_data->hir_id = "''";
    } else {
        echo form_open("admin/hirek/update_hir/$hir_data->hir_id");
    }
    ?>

    <fieldset>
        <legend>Add meg az új hír adatait. A csillaggal jelölt mezők kitöltése kötelező!</legend>


        <!-- megfelelő helyen a div#box nak meg kell kapnia a S vay L classt, illetve (fontos a nagy betű!)
                1opt div.box.S 
                2opt div.box.L
                3opt div.box.L
        -->
        <div id="newsTypeChooser" class="styledRadioSet">
            <span class="inputLabel">
                Válassz bejegyzés típust
            </span>
            <label id="mhSmallNewsBtn" for="type1" class="type1 tooltip" title="1 oszlop széles hírblokk"> 
                <img src="<?php echo base_url(); ?>admin_style/assets/type1.jpg" width="100" height="100" alt="type1" />
                <input id="type1" class="" name="hir_tipus" type="radio" value="s" <?php if ($hir_data->hir_tipus == "s")
        echo "checked"; ?>/>
            </label>
            <label id="mhBigNewsBtn" for="type2" class="type2 tooltip" title="2 oszlop széles hírblokk"> 
                <img src="<?php echo base_url(); ?>admin_style/assets/type2.jpg" width="100" height="100" alt="type2" />
                <input id="type2" class="" name="hir_tipus" type="radio" value="l" <?php if ($hir_data->hir_tipus == "l")
                           echo "checked"; ?>/>
            </label>
            <label id="mhVideoBtn" for="type3" class="type3 tooltip" title="2 oszlop széles videó-hírblokk"> 
                <img src="<?php echo base_url(); ?>admin_style/assets/type3.jpg" width="100" height="100" alt="type3"/>
                <input id="type3" class="" name="hir_tipus" type="radio" value="m" <?php if ($hir_data->hir_tipus == "m")
                           echo "checked"; ?>/>
            </label>
        </div>





        <div id="newsColorChooser" class="styledRadioSet">
            <span class="inputLabel">
                Válaszd ki a bejegyzés színét
            </span>
            <!-- megfelelő helyen a div.box nak meg kell kapnia az a....h classt, tehát:
                                div.box.S.x vagy div.box.L.x ahol x= a....h
            -->
            <label for="opt1" class="a">
                <input id="opt1" class="" name="hir_szin" type="radio" value="a" <?php if ($hir_data->hir_szin == "a")
                           echo "checked"; ?>/></label>
            <label for="opt2" class="b">
                <input id="opt2" class="" name="hir_szin" type="radio" value="b" <?php if ($hir_data->hir_szin == "b")
                           echo "checked"; ?>/></label>
            <label for="opt3" class="c">
                <input id="opt3" class="" name="hir_szin" type="radio" value="c" <?php if ($hir_data->hir_szin == "c")
                           echo "checked"; ?>/></label>
            <label for="opt4" class="d">
                <input id="opt4" class="" name="hir_szin" type="radio" value="d" <?php if ($hir_data->hir_szin == "d")
                           echo "checked"; ?>/></label>	
            <label for="opt5" class="e">
                <input id="opt5" class="" name="hir_szin" type="radio" value="e" <?php if ($hir_data->hir_szin == "e")
                           echo "checked"; ?>/></label>
            <label for="opt6" class="f">
                <input id="opt6" class="" name="hir_szin" type="radio" value="f" <?php if ($hir_data->hir_szin == "f")
                           echo "checked"; ?>/></label>
            <label for="opt7" class="g">
                <input id="opt7" class="" name="hir_szin" type="radio" value="g" <?php if ($hir_data->hir_szin == "g")
                           echo "checked"; ?>/></label>
            <label for="opt8" class="h">
                <input id="opt8" class="" name="hir_szin" type="radio" value="h" <?php if ($hir_data->hir_szin == "h")
                           echo "checked"; ?>/></label>

        </div>


        <label class="lf must">
            <span class="inputLabel">
                Hír címe
            </span>
            <span class="inputWrap">
                <input class="" type="text" name="hir_cim" value="<?php echo $hir_data->hir_cim; ?>" />
            </span>
            <span class="validate_error"><?php echo form_error('hir_cim'); ?></span> 
        </label>

        <label id="videoUploadContainer">
            <span class="inputLabel">
                Trailer youtube url
            </span>
            <span class="inlineIcon16">
                <img src="<?php echo base_url(); ?>admin_style/assets/loadanim.gif" width="16" height="16" alt="load" style="display: none;" />
            </span>
            <span class="buttonWarp">
                <input id="youtube_preload_button" class="button ui-button ui-widget ui-state-default ui-corner-all" type="submit" value="Link ellenőrzése" />
            </span>
            <span class="inputWrap">
                <input id="hir_youtube_id_editable" type="text" value="<?php
                       if ($hir_data->hir_youtube_id != "")
                           echo "http://www.youtube.com/watch?v=$hir_data->hir_youtube_id";
    ?>" 
                       />
                Youtube ID: <span id="visible_youtube_id">
                    <?php
                    if ($hir_data->hir_youtube_id != "")
                        echo $hir_data->hir_youtube_id;
                    else
                        echo "Nincs megadva";
                    ?>
                </span>
                <input id="hir_youtube_id" name="hir_youtube_id" type="hidden" class="lf" value="<?php echo $hir_data->hir_youtube_id ?>"  />
            </span>
            <span id="youtube_preview" class="videoPreview">
                <iframe id="youtube_preview_iframe" width="448" height="258" 
                <?php
                if ($hir_data->hir_youtube_id != "")
                    echo "src=\"http://www.youtube.com/embed/$hir_data->hir_youtube_id\"";
                else
                    echo "style=\"display: none;\" src=\"\"";
                ?>
                        frameborder="0" allowfullscreen></iframe>
            </span>
        </label>

        <label id="pictureUploadContainer">
            <span class="inputLabel">
                Kép
            </span>
            <span class="field_desc">
                <?php if ($hir_data->hir_kep_url != "") : ?>
                    <span class="deleteInfo" id="hir_kep_url_visible" style="display: none;">Nincs megadva.</span>
                <?php else: ?>
                    <span class="deleteInfo" id="hir_kep_url_visible">Nincs megadva.</span>
                <?php endif; ?>
            </span>


            <span class="inputWrap">
                <input id="browse_picture_button" class="button ui-button ui-widget ui-state-default ui-corner-all" type="submit" value="Kép tallózása" />
                <img id="file_uploader_waiting" class="loader" src="<?php echo base_url(); ?>admin_style/assets/loadanim.gif" width="16" height="16" alt="load" style="display: none;" />
                <input id="hir_kep_url" name="hir_kep_url" value="<?php echo $hir_data->hir_kep_url ?>" type="hidden" class="lf deleteValue" />
            </span>
            <span class="preview previewIt">
                <a href="#" class="deleteBtn" style="display: none;">
                    <img  src="<?php echo base_url(); ?>admin_style/assets/delete.png" width="40" height="40" alt="Törlés"  />
                </a>
                <img id="image_preview" class="deletePic" <?php
                if ($hir_data->hir_kep_url != "")
                    echo "src=\"$hir_data->hir_kep_url\"";
                else
                    echo "style=\"display: none;\" src=\"\"";
                ?> width="" height="" />
            </span>
        </label>

        <div id="image_browser_window" title="Galéria">
            <div id="image_browser" class="videoPreview">
            </div>
        </div>

        <label class="textAreaHolder must">
            <span class="inputLabel">
                Hír szövege
            </span>
            <textarea id="tinymce_textarea" name="hir_szoveg"><?php echo $hir_data->hir_szoveg ?></textarea>
        </label>

        <label id="cimkek_container" class="lf">
            <span class="inputLabel">
                Címkék
            </span>
            <span id="cimkek_inputWrap" class="inputWrap">
                <input id="hir_cimkek_input" class="" type="text" />
                <input id="hir_cimkek" type="hidden" name="hir_cimkek" value="<?php echo $hir_data->hir_cimkek; ?>" />
                <?php
                /**
                 * 
                 * LABELEK MEGJELENÍTÉSE STÍLUSOSAN
                 * 
                 */
                // szétszedjük a labeleket
                if (!empty($hir_data->hir_cimkek)):
                    $cimkek = explode("|", $hir_data->hir_cimkek);
                else:
                    $cimkek = NULL;
                endif;
                // ha találtunk labeleket azokat megjelenítjük stílusosan.
                if (!empty($cimkek)):
                    foreach ($cimkek as $cimke):
                        if ($cimke != ""):
                            ?>
                            <div class="remove_container"><span class="cimke_nev"><?php echo $cimke; ?></span><a class="remove" href="javascript:" title="Remove <?php echo $cimke; ?>">x</a></div>
                            <?php
                        endif;
                    endforeach;
                endif;
                /**
                 * 
                 * LABLELEK MEGJELENÍTÉSÉNEK VÉGE
                 * 
                 */
                ?>
            </span>
        </label>

    </fieldset>
    <input class="button ui-button ui-widget ui-state-default ui-corner-all" type="submit" value="Mentés" />
</form>
</div>

<script src="<?php echo base_url() ?>admin_style/js/tiny_mce/tiny_mce.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo base_url() ?>admin_style/js/tiny_mce/jquery.tinymce.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {   
                
        // youtube id megszerzése
        // ha nincs kiírjuk, hogy hiba
        $('#youtube_preload_button').click(function(){
            var video_url = $('#hir_youtube_id_editable').val();
            var video_id = video_url.split('v=')[1];
            if(video_id){
                // ha van benne még & akkor nekünk csak az elso kell
                // az az id.
                var ampersandPosition = video_id.indexOf('&');
                if(ampersandPosition != -1)
                    video_id = video_id.substring(0, ampersandPosition);
                $('#youtube_preview_error').hide();
                $('#youtube_preview_iframe').attr('src', 'http://www.youtube.com/embed/'+video_id).show(500);
                $('#hir_youtube_id').val(video_id);
                $('#visible_youtube_id').html(video_id);
                        
            }else{
                if(true){
                    $('#youtube_preview_error').html('Nem sikerült kinyerni az id-t. Valószínűleg rossz a megadott youtube link!').show(500);
                    $('#youtube_preview_iframe').hide(500);
                    $('#hir_youtube_id').val("");
                    $('#visible_youtube_id').html("Nincs megadva.");
                }
                        
            }
            return false;
        });


        // képméret lekérdezés
        function get_image_size(url){
            var isGoodSize = false;
            $.ajax({
                url: '<?php echo site_url('admin/gallery/get_picture_size'); ?>',
                data: {
                    // elküldjük az id-t, mert adatokat várunk vissza
                    image_url : url
                },
                dataType: 'json',
                type: 'post',
                async: false,
                success: function (data) {
                    if(true /* feature? */) 
                        isGoodSize = true;
                },
                error: function(XMLHttpRequest, textStatus, errorThrown){
                    $('#edit_dialog').html("Hiba történt: " + errorThrown.toString());
                }
            });
            return isGoodSize;
        }


        // elfinder inicializálás
        function init_finder(){
            $('#image_browser').elfinder({
                url : '<?php echo site_url('admin/gallery/connect') ?>',
                lang : 'hu',
                places : '',
                autoReload : '10',
                closeOnEditorCallback : false,
                editorCallback : function(url){
                    console.log(url);
                    if(get_image_size(url)){
                        $("#image_preview").show(500).attr('src', url);
                        $("#hir_kep_url").val(url);
                        $("#hir_kep_url_visible").hide().html("");
                        $( "#image_browser_window" ).dialog("close");
                    }else{
                        $("#hir_kep_url_visible").show(500).html("nincs megadva.");
                        $("#hir_kep_url").val("");
                        $("#image_preview").hide(500).attr('src', '');
                        alert('A kiválaszott kép túl nagy, kérlek adj meg másikat.');
                    }
                }
            });
        }

                
        // kép tallózás
        $('#browse_picture_button').click(function() {
            $("#file_uploader_waiting").show(500);  
            init_finder();
            $( "#image_browser_window" ).dialog('open');

            file_dialog = $( "#image_browser_window" ).dialog({
                resizable: false,
                zIndex: 999999,
                width:640,
                height:480,
                modal: true,
                beforeClose: function(){
                    $("#file_uploader_waiting").hide(500); 
                }
            }); 
                   
            return false;
        });
                
               
        // tinymce
        $('#tinymce_textarea').tinymce({
            // General options
            theme : "advanced",
            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink",
            theme_advanced_buttons2: "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : true,
            language : "hu"
        });

                

        // AUTOCOMPLETE
        $('#hir_cimkek_input').autocomplete({
            source: function(req, add){
                $.ajax({
                    url: '<?php echo site_url('admin/hirek/ajax_get_cimke_by_start'); ?>',
                    data: {
                        // elküldjük azt a stringet, ami épp az inputfieldben van
                        starting_chars: req
                    },
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        add(data.cimkek);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown){
                        $('#edit_dialog').html("Hiba történt: " + errorThrown.toString());
                    }
                });
            },
            //define select handler
            select: function(e, ui) {
                var cimke = ui.item.value;
                create_formatted_cimke(cimke);
                //$("#hir_cimkek_input").val(""); 
            },
            change: function(event, ui) { 
                //prevent 'cimkek' field being updated and correct position  
                //$("#hir_cimkek_input").val("").css("top", 2); 
            },
            open: function(event, ui) {  },
            search: function(event, ui) { },
            create: function(event, ui) {  },
            close: function(event, ui) { },
            focus: function(event, ui) {  }
        });
        
        //add click handler to cimkek div
        $("#cimkek_inputWrap").click(function(){
            //focus 'hir_cimkek_input' field
            $("#hir_cimkek_input").focus();
        });

        //add live handler for clicks on remove links
        $(".remove", document.getElementById("cimkek")).live("click", function(){
            // get label to remove
            var cimke_to_remove = $(this).parent().find('.cimke_nev').html() + "|";
            
            // remove label log
            console.log("Remove label: " + cimke_to_remove);
            
            // get value from hidden input
            var hir_cimkek_content = $("#hir_cimkek").val();
            hir_cimkek_content = hir_cimkek_content.replace(cimke_to_remove, "");
            
            // set new value on hidden input
            $("#hir_cimkek").val(hir_cimkek_content);
            console.log("new hidden input value: " + $("#hir_cimkek").val());
            
            //remove label from visual list
            $(this).parent().remove();

            //correct 'to' field position
            if($("#cimkek span").length === 0) {
                $("#to").css("top", 0);
            }
        });
        
        // itt van kezelve az enter lenyomása
        $('#hir_cimkek_input').keypress(function(e) {
            if(e.which == 13) {
                // változók kiolvasása, splittelve vesszővel
                var cimkek = $(this).val().split(',');
                // minden cimkén végigmegyek
                for (var x in cimkek){
                    // trimmelem
                    cimkek[x] = cimkek[x].replace(/^\s+|\s+$/g, "");
                    // és megkreálom hozzá a gombot.
                    create_formatted_cimke(cimkek[x]);
                }
                // kitörlöm az input fieldet
                $(this).val("");
                // visszetérek hamisan
                return false;
            }
        });
        
        /**
         * Cimkét kreál tartalomból
         */
        function create_formatted_cimke(cimke){
            // megnézem tartalmazza-e már az input field a cimkét
            // ha igen, visszatérek hamissal
            if($("#hir_cimkek").val().indexOf(cimke) != -1){
                console.log("label already in the queue");
                return false;
            }
            
            // a div amit beillesztünk
            span = "<div class=\"remove_container\">";
            span += "<span class=\"cimke_nev\">" + cimke + "</span>";
            // remove button
            span += "<a class=\"remove\" href=\"javascript: \" title=\"Remove "+ cimke +"\">x</a>";
            span += "</div>";
                
            //add cimke to hir_cimkek_input div
            $(span).insertAfter("#hir_cimkek_input");
                
            // add cimke to hidden input field
            $("#hir_cimkek").val($("#hir_cimkek").val() + cimke + "|");
            console.log("new hidden input value: " + $("#hir_cimkek").val());
            $("#hir_cimkek_input").val(""); 
        }
        
    });
    
</script>
